Millui

# DropDown 下拉菜单

# 基础用法

activeColor 为选中字体的颜色。 children 是一个 MillDropDownItem 列表，代表每一项。

MillDropDownItem 的字段：

  • key 是唯一标识，不能重复。 onChange 回调的时候会返回 key 来标记操作的是哪一项
  • options 传递一个列表，用来渲染选项
MillDropDown(
  onChange: (Key key, value) {
    print(key);
    print(value);
  },
  activeColor: Color(0xffee0a24),
  children: [
    MillDropDownItem(key: ValueKey('filter'), options: _list1),
    MillDropDownItem(key: ValueKey('order'), options: _list2),
    MillDropDownItem(key: ValueKey('filter3'), options: _list2),
  ],
),

# 自定义下拉内容

MillDropDownItem 的 child 设置 后 options 失效，下拉框内为 child 自定义的内容。 MillDropDownItem 的 title 作为导航栏中展示的内容。

MillDropDown(
  activeColor: Color(0xffee0a24),
  children: [
    MillDropDownItem(key: ValueKey('filter'), options: _list1),
    MillDropDownItem(key: ValueKey('order'), options: _list2),
    MillDropDownItem(key: ValueKey('filter3'), options: _list2),
    MillDropDownItem(
      title: '自定义列',
      child: Container(
        height: 100,
        alig
        child: Text('自定义列'),
      ),
    ),
  ],
),
device-2020-08-10-110957.png

# 仅作为导航存在

MillDropDownItem 的 builder 传递后 child 和 options 都失效。将作为 nav 存在，不会出现下拉菜单, onTap 可设置点击回调。
调用方式如下：

MillDropDown(
  activeColor: Color(0xffee0a24),
  children: [
    MillDropDownItem(key: ValueKey('filter'), options: _list1),
    MillDropDownItem(key: ValueKey('order'), options: _list2),
    MillDropDownItem(
      title: title,
      child: Container(
        child: Text(title),
      ),
    ),
    MillDropDownItem(
      builder: (BuildContext context) {
        return MillDropDownCustomItem(
          onTap: () {
            MillToast.success(context, text: 'success');
          },
          child: Container(
            alignment: Alignment.center,
            child: Text('自定义item'),
          ),
        );
      },
    ),
  ],
),
device-2020-08-10-110957.png

# disabled

在 MillDropDownItem 里设置 disabled 可以使 nav 不能点击。在 options 里设置 disabled。下拉选项不能点击。

List list = [
  {
    'name': '价格降序',
    'id': 1,
  },
  {
    'name': '价格升序',
    'id': 2,
  },
  {
    'name': '点击升序',
    'id': 3,
    'disabled': true,
  }
];

MillDropDown(
  activeColor: Color(0xffee0a24),
  children: [
    MillDropDownItem(
      key: ValueKey('filter'),
      options: list,
    ),
    MillDropDownItem(
      key: ValueKey('order'),
      options: list,
      disabled: true,
    ),
    MillDropDownItem(
      title: title,
      child: Container(
        child: Text(title),
      ),
    ),
    MillDropDownItem(
      builder: (BuildContext context) {
        return MillDropDownCustomItem(
          onTap: () {
            print('sss');
          },
          child: Container(
            alignment: Alignment.center,
            child: Text(title2),
          ),
        );
      },
    ),
  ],
),
device-2020-08-10-110957.png

# 自定义对齐方式和间距

mainAxisAlignment: 字段设置对齐方式。 padding： 设置每项的间隔。 注意：将 flex 设置为 0。

MillDropDown(
  activeColor: Color(0xffee0a24),
  mainAxisAlignment: MainAxisAlignment.start,
  children: [
    MillDropDownItem(
      flex: 0,
      padding: EdgeInsets.symmetric(horizontal: 8),
      key: ValueKey('filter'),
      options: _list1,
    ),
    MillDropDownItem(
      flex: 0,
      padding: EdgeInsets.symmetric(horizontal: 8),
      key: ValueKey('order'),
      options: _list2,
    ),
    MillDropDownItem(
      flex: 0,
      padding: EdgeInsets.symmetric(horizontal: 8),
      title: title,
      child: Container(
        child: Text(title),
      ),
    ),
    MillDropDownItem(
      flex: 0,
      padding: EdgeInsets.symmetric(horizontal: 8),
      builder: (BuildContext context) {
        return MillDropDownCustomItem(
          onTap: () {
            print('sss');
          },
          child: Container(
            alignment: Alignment.center,
            child: Text(title2),
          ),
        );
      },
    ),
  ],
),
device-2020-08-10-110957.png

# Attributes

字段名称 说明 类型 默认值
onChange change 回调 Function
children 列表 List<MillDropDownItem>
activeColor 选中时字体颜色 Color Color(0xff1989fa)
bgColor 背景色 Color Color(0xffffffff)
activeBgColor 下拉框出现时背景色 Color Color(0xffffffff)
direction 方向， String (down 、up) down
mainAxisAlignment 选项按钮的对齐方式 MainAxisAlignment MainAxisAlignment.spaceAround
optionRadius options 框的圆角 double 0
navHeight 高度 double 60
mainAxisAlignment 对齐方式 MainAxisAlignment MainAxisAlignment.spaceAround

# MillDropDownItem

# Attributes

字段名称 说明 类型 默认值
child 展开项的自定义元素 Widget
options 展开项选项 List
defalutValue 选项默认值
builder 非下拉选项设置 MillDropDownBuilder
title 选项展示的title String
disabled 禁用该选项 bool false
maxHeight 选项下拉框的高度 double 190
flex 选项按钮 expanded 的占比 int 1
padding 选项按钮的 padding
fontSize 字体大小 double 14

← CheckBox 复选框 →